<template>
  <div id="panel">
    <el-row :gutter="20">
      <!-- 部门数据 -->
      <el-col :span="5" class="head-container">
        <tree-select
          v-model="deptName"
          @node-click="handleTreeSelect"
          ref="treeSelectComponent"
        />
      </el-col>
      <!-- 用户数据 -->
      <el-col :span="19" class="body-container">
        <el-card class="queryForm">
          <el-form
            :model="queryParams"
            ref="queryForm"
            size="small"
            :inline="true"
          >
            <el-form-item label="时间段">
              <el-date-picker
                v-model="dateRange"
                style="width: 240px"
                value-format="yyyy-MM-dd"
                type="daterange"
                range-separator="-"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
              ></el-date-picker>
            </el-form-item>
            <el-form-item label="是否超标" prop="isoverstandard">
              <el-radio-group v-model="queryParams.isoverstandard">
                <el-radio :label="1">是</el-radio>
                <el-radio :label="0">否</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="是否整四点数据" prop="isitontimedata">
              <el-radio-group v-model="queryParams.isitontimedata">
                <el-radio :label="1">是</el-radio>
                <el-radio :label="0">否</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item>
              <el-button
                type="primary"
                icon="el-icon-search"
                size="mini"
                @click="handleQuery"
                >搜索</el-button
              >
              <el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
                >重置</el-button
              >
            </el-form-item>
          </el-form>

          <el-table :data="tableList.rows" border style="width: 100%">
            <el-table-column prop="segmentname" label="断面名称" />
            <el-table-column prop="sampletime" label="监测时间" width="180" />
            <el-table-column prop="qualitylevelname" label="水质级别" />
            <el-table-column prop="address" label="是否超标">
              <template slot-scope="scope">
                <el-tag v-if="scope.row.isoverstandard == 1" type="danger"
                  >是</el-tag
                >
                <el-tag v-else-if="scope.row.isoverstandard == 0" type="success"
                  >否</el-tag
                >
                <span v-else>-</span>
              </template>
            </el-table-column>
            <el-table-column
              prop="waterquality"
              label="水质评价"
            ></el-table-column>
            <el-table-column prop="waterquality" label="超标描述" />
            <el-table-column prop="address" label="色度(度)" />
            <el-table-column prop="address" label="嗅和味(无量纲)" />
          </el-table>

          <pagination
            :total="tableList.total"
            :page.sync="queryParams.pageNum"
            :limit.sync="queryParams.pageSize"
            @pagination="getList"
          />
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import dayjs from "dayjs"; // 引入dayjs
import { deptTreeSelect } from "@/api/system/user";
import { getSsDataList } from "@/api/dataResources/waterJcData/jcsection";
export default {
  name: "HydrologicStation",
  dicts: ["sys_normal_disable", "sys_user_sex"],
  components: {
    TreeSelect: () => import("./treeSelect"),
  },
  computed: {},
  data() {
    return {
      tableHeight: window.innerHeight - 400,
      radio3: "水源地类型",
      radio2: "最新",
      value1: [],
      value2: [],
      // 部门名称
      deptName: undefined,
      // 所有部门树选项
      deptOptions: undefined,
      options: [
        { value: "河流1", label: "河流1" },
        { value: "河流2", label: "河流2" },
        { value: "河流3", label: "河流3" },
      ],
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        isoverstandard: "",
        isitontimedata: "",
      },
      tableList: {
        total: 0,
        rows: [],
      },
      // 总条数
      total: 0,
      dateRange: [], // 日期范围
      // 选中数组
      ids: [],

      defaultProps: {
        children: "children",
        label: "label",
      },
      // 是否显示新增/修改弹出层
      open: false,
      // 弹出层标题
      title: "",
      // 表单参数
      form: {},
      // 表单校验
      rules: {
        nickName: [
          { required: true, message: "用户名称不能为空", trigger: "blur" },
          {
            min: 2,
            max: 20,
            message: "用户名称长度必须介于 2 和 20 之间",
            trigger: "blur",
          },
        ],
        deptId: [
          { required: true, message: "用户昵称不能为空", trigger: "blur" },
        ],
      },
      treeIds: "",
    };
  },
  watch: {},
  created() {
    this.getDeptTree();
  },
  mounted() {
    this.pageInit();
  },
  methods: {
    // 页面初始化请求的数据
    pageInit() {
      this.getRwly();
      // 设置默认时间范围为最近三天
      this.setDefaultDateRange();
      this.getList();
    },
    // 设置默认时间范围（最近三天）
    setDefaultDateRange() {
      const endDate = dayjs().format("YYYY-MM-DD"); // 今天
      const startDate = dayjs().subtract(2, "day").format("YYYY-MM-DD"); // 三天前（今天-2天）
      this.dateRange = [startDate, endDate];
    },
    // 获取任务来源下拉选项数据
    getRwly() {},
    /** 查询部门下拉树结构 */
    getDeptTree() {
      deptTreeSelect().then((response) => {
        this.deptOptions = response.data;
        this.enabledDeptOptions = this.filterDisabledDept(
          JSON.parse(JSON.stringify(response.data))
        );
      });
    },
    // 筛选节点
    filterNode(value, data) {
      if (!value) return true;
      return data.label.indexOf(value) !== -1;
    },
    // 节点单击事件
    handleTreeSelect(data) {
      console.log(">>>选中的是啥啊", data);
      this.treeIds = data;
      this.handleQuery();
    },
    // 过滤禁用的部门
    filterDisabledDept(deptList) {
      return deptList.filter((dept) => {
        if (dept.disabled) {
          return false;
        }
        if (dept.children && dept.children.length) {
          dept.children = this.filterDisabledDept(dept.children);
        }
        return true;
      });
    },
    // 表格checkbox选择数据
    handleSelectionChange(selection) {
      this.ids = selection.map((item) => item.userId);
    },

    // 分页
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.queryParams.pageSize = val;
      this.getList();
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.queryParams.pageNum = val;
      this.getList();
    },
    // 搜索
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    // 重置、清除表单
    resetQuery() {
      // 重置时恢复默认的最近三天时间范围
      this.setDefaultDateRange();
      this.resetForm("queryForm");
      // 清空查询参数
      this.queryParams.isoverstandard = "";
      this.queryParams.isitontimedata = "";
      this.treeIds = "";
    },
    // 弹出层取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.form = {
        stationName: "",
        riverName: "",
        longitude: "",
        latitude: "",
        sex: "",
        address: "",
      };
      this.resetForm("form");
    },

    // 导出
    handleExport() {},
    // 获取表格数据
    getList() {
      let query = {
        startTime: this.dateRange.length > 0 ? this.dateRange[0] : "",
        endTime: this.dateRange.length > 0 ? this.dateRange[1] : "",
        isoverstandard: this.queryParams.isoverstandard,
        isitontimedata: this.queryParams.isitontimedata,
        segmentid: this.treeIds,
        pageNum: this.queryParams.pageNum,
        pageSize: this.queryParams.pageSize,
      };
      getSsDataList(query).then((res) => {
        console.log(">>>ssss", res);
        this.tableList.rows = res.rows;
        this.tableList.total = res.total;
      });
    },
  },
};
</script>

<style lang="scss" scoped>
p {
  margin: 0;
}

img {
  vertical-align: middle;
}

#panel {
  padding-bottom: 40px;
  min-height: calc(100% - 20px);
  margin: 0;

  .pagination-self {
    margin: 20px 0;
    display: flex;
    justify-content: flex-end;
    position: relative;

    .el-pagination__total {
      position: absolute;
      left: 5px;
      color: #409eff;
      font-weight: 600;
      font-size: 15px;
    }
  }

  .refresh-button {
    .el-icon-refresh {
      font-size: 18px;
      line-height: 28px;
    }
  }

  .el-card {
    margin: 10px;
  }

  .queryForm .el-card__body {
    padding: 0 20px !important;
  }

  .queryForm {
    .el-form-item {
      margin: 20px 0 20px 20px;
    }

    .el-form-item:first-child {
      margin-left: 0 !important;
    }

    .el-form-item__label {
      padding-right: 5px;
      color: #555;
    }

    .times {
      .el-form-item__content {
        width: 250px;
      }
    }

    .el-form-item__content {
      min-width: 200px;
    }

    .searchBtnBox {
      display: inline-block;
      margin: 20px 0 20px 20px;
    }
  }

  .pageContent {
    .tabs-list {
      padding-top: 20px;
    }

    .el-tabs__header {
      background: #fff;
    }

    .el-tabs__item {
      border: 1px solid #eee;
      margin: 0;
      border-left: 0;
      background: #fafbfc;
      color: #000;
    }

    .el-tabs__item:first-child {
      margin-left: 20px;
      border-left: 1px solid #eee;
    }

    .is-active {
      border-bottom: 0 !important;
      background: #fff;
      color: #307eff;
    }
  }

  .anjian label {
    padding: 0 !important;
    width: 100px !important;
  }

  .queryForm .el-checkbox {
    margin-right: 10px !important;
    width: auto !important;
  }

  .iszgfc .el-form-item__content {
    width: 120px;
  }
}
</style>
